<template>
	<div class="goeasy-audio-player" @click="playAudio">
		<div class="audio-facade" :class="customClass"
			:style="{width:(Math.ceil(duration>20?20:duration))*7 + 40 + 'px'}">
			<div class="audio-facade-bg" :class="{'play-icon':play}"> </div>
			<div class="audio-facade-duration">{{Math.ceil(duration) || 1}}</div>
		</div>
	</div>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		props: ['src', 'duration', 'customClass'],
		data() {
			return {
				play: false
			}
		},
		methods: {
			playAudio() {
				this.play = true;
				innerAudioContext.src = this.src;
				innerAudioContext.play();
				setTimeout(() => {
					this.play = false;
				}, this.duration * 1000)
			}
		}
	}
</script>

<style scoped>
	.goeasy-audio-player {
		margin-top: 6px;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.audio-facade {
		position: relative;
		padding: 10px;
		border-radius: 3px;
		display: flex;
		min-width: 10px;
		background: #ffffff;
		font-size: 15px;
		color: #333333;
		text-align: left;
	}

	.audio-facade::before {
		content: "";
		top: 15px;
		transform: rotate(45deg);
		position: absolute;
		z-index: -1;
		display: inline-block;
		overflow: hidden;
		width: 10px;
		height: 10px;
		left: -6px;
		right: initial;
		background-color: inherit;
		filter: blur(3px);
		opacity: 0.3;
	}

	.self .audio-facade::before {
		left: auto;
		right: -6px;
	}

	.audio-facade::after {
		content: "";
		top: 14px;
		transform: rotate(45deg);
		position: absolute;
		z-index: 100;
		display: inline-block;
		overflow: hidden;
		width: 10px;
		height: 10px;
		left: -6px;
		right: initial;
		background-color: inherit;
	}

	.self .audio-facade::after {
		left: auto;
		right: -6px;
	}

	.audio-facade-bg {
		background: url("./images/voice.png") no-repeat center;
		background-size: 12px 12px;
		width: 25px;
	}

	.audio-facade-bg.play-icon {
		background: url("./images/play.gif") no-repeat center;
		background-size: 15px;
	}

	.audio-facade-duration::after {
		content: "''";
		letter-spacing: -2px;
	}

	.self {
		flex-direction: row-reverse;
		text-align: right;
	}

	.self .audio-facade-bg,
	.self .audio-facade-bg.play-icon {
		transform: rotate(180deg);
	}
</style>
